<template>
<!--    <div>-->
        <nav-bar>
            <template v-slot:default>登录</template>
        </nav-bar>
        <el-form  ref="loginFormRef" :rules="Rules" :inline="true" :model="form" class="login_form">
            <el-form-item label="请输入用户名：" prop="username">
                <el-input v-model="form.username" />
            </el-form-item>
            <br>
            <el-form-item label="请输入密码：&nbsp;&nbsp;&nbsp;&nbsp;" prop="pwd">
                <el-input type="password" v-model="form.pwd" />
            </el-form-item>
            <br>
            <el-form-item class="button">
                <el-button type="primary" @click="submitForm()">登录</el-button>
                <el-button type="info" @click="resetForm()">重置</el-button>
            </el-form-item>
        </el-form>

    <!--    </div>-->


</template>
<script lang="js">
import {getCurrentInstance, onMounted, reactive, toRefs} from "vue";
import NavBar from "../../components/common/navbar/NavBar"
import { ElMessage } from 'element-plus'
import router from "@/router/index";

export default {
    components: {NavBar},
    setup(){
        const state = reactive({
            form: {},
            Rules: {}
        })
        let formInline =  {
            username: '',
            pwd: '',
        }
        state.form = formInline

        let formInlineRules = {
            username: [
                {required: true, message: '账号不能为空', trigger: 'blur'},
                {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
            ],
            pwd: [
                {required: true, message: '密码不能为空', trigger: 'blur'},
                {min: 3, max: 10, message: '长度在 3 到 10 个字符', trigger: 'blur'}
            ],
        }
        state.Rules = formInlineRules
        const { proxy } = getCurrentInstance()

        const submitForm = () => {
            if(formInline.username === "123" && formInline.pwd === "456"){
                ElMessage({
                    message: '登录成功',
                    type: 'success',
                });
                proxy.mittBus.emit('mittFn',{name: formInline.username})
                setTimeout(()=>{
                    router.push({path:'/home'})

                },2000)
            }else{
                ElMessage({
                    message: '账号或密码输入错误，请重新输入',
                    type: 'error',
                })
            }


        }
        const resetForm = function(){
            this.$refs.loginFormRef.resetFields();
        }


        return {
            ...toRefs(state),
            submitForm,
            resetForm,
        }
    }
}
</script>

<style>
.login_form{
    position: absolute;
    top: 100px;
    width: 100%;
    padding: 0 20px;
    /*box-sizing: border-box;*/
}

.button{
    display: flex;
    justify-content: flex-end;
}
</style>
